<template>
  <div>
      <p>歌曲详情--当前歌曲的id：{{$route.params.id}}</p>
      <p>从列表页跳转到详情页，详情页中结构相同数据不同，页面数量很多</p>
      <router-link to="/detail/loveyou">爱你</router-link>
  </div>
</template>

<script>
export default {
    created() {
        let id = this.$route.params.id;
        this.getDetail(id)
    },
    // 通过watch来监听页面url的变化，重新发请求
    watch: {
        $route(to, from) {
            console.log('url变化了！！！');
            this.getDetail(to.params.id)
        }
    },
    // beforeRouteUpdate(to, from, next){ // 相当于给页面的url加上了监听
    //     this.getDetail(to.params.id)
    //     next()
    // },
    methods: {
        // 获取歌曲详情
        getDetail(id) {
            console.log('正在下载歌曲'+id+'的资源：');
            this.$http('http://localhost:3000/song/detail?ids='+id)
            .then(res => {
                console.log(res);
            })
        }
    }
}
</script>

<style>

</style>